<template>
	<view class="user">
		<view class="head">
			<view class="pic" @tap="jumpUserInfo">
				<image :src="isShow ? userInfo.icon : '../../static/icons/user.png'" mode=""></image>
			</view>
			<view class="info">
				<view>{{userInfo.nickname}}</view>
				<view>用户名: {{userInfo.username}}</view>
			</view>
		</view>
		<view class="myOrder">
			<view class="title">
				我的订单
			</view>
			<view class="navs">
				<view class="item" v-for="el in navList" :key="el.id" @tap="jumpOrderForm(el.id)">
					<view class="pic">
						<image :src="el.icon" mode=""></image>
					</view>
					<view class="text">{{el.text}}</view>
				</view>
			</view>
		</view>
		<view class="grid">
			<view class="item" v-for="el in gridList" :key="el.id" @tap="jumpMy(el.id)">
				<view class="box">
					<view class="pic">
						<image :src="el.icon" mode=""></image>
					</view>
					<view class="text">{{el.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mix from "../../mixins/index.js"
	import { getMemberInfo } from "../../api/user/index.js"
	export default {
		mixins:[mix],
		data() {
			return {
				navList:[
					{
						icon:"../../static/icons/icon-pay.png",
						text:"待付款",
						id:"0"
					},
					{
						icon:"../../static/icons/pay-done.png",
						text:"已付款",
						id:"1"
					},
					{
						icon:"../../static/icons/icon-car.png",
						text:"已发货",
						id:"2"
					},
					{
						icon:"../../static/icons/icon-done.png",
						text:"已收货",
						id:"3"
					},
					{
						icon:"../../static/icons/icon-back.png",
						text:"售后",
						id:"4"
					}
				],
				gridList:[
					{
						icon:"../../static/icons/save.png",
						text:"商品收藏",
						id:"1"
					},
					{
						icon:"../../static/icons/brand.png",
						text:"品牌",
						id:"2"
					},
					{
						icon:"../../static/icons/article.png",
						text:"文章收藏",
						id:"3"
					},
					{
						icon:"../../static/icons/address.png",
						text:"地址",
						id:"4"
					},
					{
						icon:"../../static/icons/card.png",
						text:"卡包",
						id:"5"
					},
					{
						icon:"../../static/icons/cart2.png",
						text:"购物车",
						id:"6"
					},
					{
						icon:"../../static/icons/tel.png",
						text:"联系客服",
						id:"7"
					}
					
				],
				userInfo:{},
				isShow:false
			};
		},
		methods:{
			jumpUserInfo() {
				uni.navigateTo({
					url:"/pages/user/userInfo/userInfo"
				})
			},
			jumpOrderForm(id) {
				uni.navigateTo({
					url:`/pages/user/orderForm/orderForm?tabId=${id}`
				})
			},
			init() {
				getMemberInfo().then(res=>{
					this.userInfo = res.data.userInfo
					this.isShow = true
					console.log(this.userInfo)
				})
			},
			jumpMy(id) {
				switch (id) {
					case "1":
					uni.navigateTo({
						url:"/pages/user/myCollect/myCollect"
					})
					break;
					case "2":
					uni.showToast({
						title:"品牌功能暂未开通!",
						icon:"none"
					})
					break;
					case "3":
					uni.navigateTo({
						url:"/pages/user/essay/essay"
					})
					break;
					case "4":
					uni.navigateTo({
						url:"/pages/user/site/site"
					})
					break;
					case "5":
					uni.showToast({
						title:"卡包功能暂未开通!",
						icon:"none"
					})
					break;
					case "6":
					uni.navigateTo({
						url:"/pages/home/cart/cart"
					})
					break;
					case "7":
					console.log("我是联系客服")
					break;
				}
			}
		},
		onShow() {
			this.checkLogin1(this.init)
		}
	}
</script>

<style lang="scss" scoped>
.user {
	padding: 0 40rpx;
}
.head {
	display: flex;
	padding-top: 60rpx;
	.pic {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: #fff;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 28rpx;
		padding: 7px 0;
		view {
			&:first-child {
				font-size: 40rpx;
				color: #3d4c46;
				font-weight: bolder;
			}
			&:last-child {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
}

.myOrder {
	height: 208rpx;
	margin-top: 60rpx;
	background-color: #FFFFFF;
	border-radius: 4rpx;
	.title {
		height: 74rpx;
		border-bottom: 1px solid #ddd;
		margin: 0 54rpx;
		font-size: 26rpx;
		color: #000;
		line-height: 74rpx;
	}
	.navs {
		display: flex;
		justify-content: space-between;
		padding: 0 54rpx;
		height: 103.2rpx;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100%;
			.pic {
				display: block;
				width: 40rpx;
				height: 40rpx;
				image {
					width: 100%;
					height: 100%;
					margin-top: 20rpx;
				}
				
			}
			.text {
				font-size: 26rpx;
				color: #000;
				line-height: 36rpx;
				margin-top: 28rpx;
			}
		}
		
	}
}
.grid {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 600rpx;
	padding: 15px 0 30px 0;
	margin-top: 60rpx;
	border-radius: 20rpx;
	background-color: #FFFFFF;
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 33.33%;
		height: 200rpx;
		.box {
			width: fit-content;
			height: 151.6rpx;
			.pic {
				width: 50rpx;
				height: 50rpx;
				margin: 15px auto;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				font-size: 26rpx;
				color: #000;
				line-height: 48rpx;
			}
		}
	}
}
</style>
